<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
	var score = new Array();
	var false_number = new Array();
	var part_names = new Array();
	var pn = '';
	'<c:forEach items="${viewscore}" var="score">'
	scr = ${score.answer_true};
	score.push(scr);
	
	fn = ${score.part_number} - ${score.answer_true};
    false_number.push(fn);
    
    pn = '<c:out value="${score.part_name}"/>'
    part_names.push(pn);
	'</c:forEach>'

	$(function() {
		$('#container')
				.highcharts(
						{
							credits : {
								enabled : false
							},
							chart : {
								type : 'column'
							},
							title : {
								text : 'Your score! Congratulations!'
							},
							xAxis : {
								categories : part_names // [ 'Part1', 'Part2', 'Part3','Part4', 'Part5', 'Part6', 'Part7']
							},
							yAxis : {
								min : 0,//so cau toi thieu
								title : {
									text : 'Total score'
								},
								stackLabels : {
									enabled : true,
									style : {
										fontWeight : 'bold',
										color : (Highcharts.theme && Highcharts.theme.textColor)
												|| 'gray'// mau tong diem
									}
								}
							},
							legend : {
								align : 'right',
								x : -100,
								verticalAlign : 'top',
								y : 20,
								floating : true,
								backgroundColor : (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid)
										|| 'white',
								borderColor : '#CCC',
								borderWidth : 1,
								shadow : false
							},
							tooltip : {
								formatter : function() {
									return '<b>' + this.x + '</b><br/>'
											+ this.series.name + ': ' + this.y
											+ '<br/>' + 'Total: '
											+ this.point.stackTotal;
								}
							},
							plotOptions : {
								column : {
									stacking : 'normal',
									dataLabels : {
										enabled : true,
										color : (Highcharts.theme && Highcharts.theme.dataLabelsColor)
												|| 'white'
									}
								}
							},
							series : [ {

								name : 'True',
								data : score//[ 8, 27, 25, 16, 20, 7, 20 ]
							}, {
								color : "red",// hien thi mau cua cot
								name : 'False',
								data : false_number //[ 2, 3, 5, 14, 20, 5, 28 ]
							} ]
						});
	});
</script>
</head>
<body>
	<div id="container"
		style="min-width: 400px; height: 400px; margin: 0 auto"></div>
	<div>
		<c:forEach items="${viewscore}" var="score">
        Part name: <c:out value="${score.part_name }"></c:out>
        --- Part number: <c:out value="${score.part_number }"></c:out>
        
        --- part score: <c:out value="${score.answer_true }"></c:out>
		</c:forEach>
	</div>
</body>
</html>